<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3-属性选择器示例</title>
    <style>
        h2[title] {
            color: #09f;
        }

        .odds {
            color: #90f;
        }

        [title$="jp"] {
            color: #9f0;
        }

        li[class][title*="y"] {
            color: #f09;
        }
    </style>
</head>

<body>
    <div id="box">
        <h2 class="odds" title="cartoonlist">动画列表</h2>
        <ul>
            <li class="odds" title="kn_jp">名侦探柯南</li>
            <li class="evens" title="hy_jp">火影忍者</li>
            <li class="odds" title="ss_jp">死神</li>
            <li class="evens" title="yj_jp">妖精的尾巴</li>
            <li title="yj_jp">银魂</li>
            <li class="evens" title="hm_da">黑猫警长</li>
            <li class="odds" title="xl_ds">仙履奇缘</li>
        </ul>
        <h2 class="evens">动画列表</h2>
    </div>

    <!-- 
        1.设置有title属性的<h2>元素的文本颜色为#09f
        2.设置class属性的值为odds的元素的文本颜色#90f
        3.改变title属 性的值中以jp结尾的元素的文本颜色为#9f0
        4.设置包含class属性，且title属性的值中含有y的<li>元素的文本颜色为#f09
        
        
        结论：
            标签[属性]=>包含属性
            标签[属性=值]=>准备匹配
            标签[属性(^$*)=值]=>模糊匹配
     -->
</body>

</html>